<template>
  <div class="topbar-wrap">
    <div class="left">
      <img :src="back" alt="" @click="goBack" />
    </div>
    <div class="middle">
      <div class="item" v-for="(item, index) in channels" :key="index">
        <span
          :class="{ active: tabIndex === index }"
          @click="tabIndexChange(index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="right">
      <div class="dt" @click="gotoPublish()">
        <img src="@/assets/照相机.png" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { queryVideoList } from "@/api/share";

export default {
  name: "topBar",
  computed: {
    ...mapState("share", ["channels"]),
  },
  props: {
    token: {
      type: String,
    },
  },
  data() {
    return {
      // token: '',
      phone: require("@/assets/phone.png"),
      back: require("@/assets/search/back.png"),
      tabIndex: 1,
      channelItem: [],
      current: 1,
      size: 10,
    };
  },
  watch: {
    token: {
      handler(newVal, oldVal) {
        this.$toast.success(newVal);
      },
    },
  },
  async mounted() {
    // this.token = this.getParam('token') ? decodeURI(this.getParam('token')) : '';
    if (this.token) {
      // this.$refs.topBar.setToken({token: this.token})
      this.$toast.success(this.token + TopBar);
    }
    await this.getChannelList();
    this.channelItem = this.channels[this.tabIndex];
    console.log("channelItem", this.channelItem);
    var id = "-1";
    var index = this.channels.findIndex((item) => item.routerId == id);
    this.tabIndex = index;
    this.getVideoList();
  },
  methods: {
    async getChannelList() {
      let data = {
        subscribe: 0,
        token: this.$store.state.token,
      };
      // channelList(data).then((res) => {
      //   this.channels = res.data
      // })
      await this.$store.dispatch("share/getChannelLlist", data);
    },
    // setToken(item) {
    //   this.token = item.token
    // },
    gotoPublish() {
      // let message = {
      //   action: 'pushPage',
      //   param: {
      //     type: 'web',
      //     name: '/home/share/publish',
      //     url: `${this.$store.state.linkUrl}/publish?commentType=2&token=${this.token}`
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
      // this.$router.push({path: '/publish', query: {commentType: 2}})

      this.$router.push({ path: "/publish", query: { commentType: 2 } });
    },
    goBack() {
      this.$router.go(-1);
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    tabIndexChange(index) {
      this.tabIndex = index;
      this.channelItem = this.channels[index];
      //请求短视频的数据
      this.getVideoList();
    },
    init() {
      this.current += 1;
      this.getVideoList();
    },
    getVideoList() {
      let data = {
        isOneSelf: 1,
        routerId: this.channelItem.routerId,
        token: this.token,
        current: this.current,
        size: this.size,
      };
      // this.$toast.success(`${JSON.stringify(data)}`)
      // this.$toast.success('进入方法')
      // this.$toast.success(`${this.$store}`)
      this.$store.dispatch("share/getVideoList", data);
      // this.getVideoList(data)
    },
    async getVideoList1(params) {
      this.$toast.success("进入store getVideoList");
      let res = await queryVideoList(params);
      if (res.data.records.length > 0) {
        res.data.records.push(...res.data.records);
      }
      this.$store.commit("share/SET_VIDEOS", res.data.records);
      if (this.$store.state.share.state.videoId) {
        console.log("有video_id", state.videoId);
        this.$store.commit("share/UPDATE_VIDES_LIST", state.videoId);
      }
      commit("SET_VIDEO_ITEM", res.data.records[0]);
    },
  },
};
</script>

<style lang="less" scoped>
.topbar-wrap {
  position: fixed;
  top: 0%;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  // background-color: #000;
  .iconfont {
    font-size: 15px;
  }

  .left {
    flex: 1;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .middle {
    font-size: 15px;
    display: flex;
    width: 80%;
    overflow-x: scroll;

    .item {
      flex-shrink: 0;
      font-size: 20px;
      font-weight: 500;
      color: rgba(199, 199, 199, 1);
      text-align: center;
      padding: 0 10px;
    }

    .active {
      //color: red;
      border-bottom: 2px solid #ffffff;
      padding-bottom: 8px;
      color: #ffffff;
    }
  }

  .right {
    flex: 1;

    .dt {
      width: 43px;
      height: 28px;
      opacity: 1;
      border-radius: 3px;
      //background: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: center;
      align-items: center;

      > img {
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
